<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    let i = 1
    function mouseMove() {
      box.innerHTML = i++
    }
    // 写一个防抖函数
    // 1.声明一个定时变量
    // 2.当鼠标滑动都先判断是否有定时器了，如果有定时器先清除以前的定时器
    // 3.如果没有定时器则开启定时器，存到变量里区
    // 4.在定时器里调用要执行的函数
    function debounce() {
      let timer
      // return 一个匿名函数
      return function (fn, t) {
        // 2,3,4
        if (timer) clearTimeout(timer)
        timer = setTimeout(function () {
          fn()
        }, t)
      }
    }
    box.addEventListener('mousemove', debounce(mouseMove, 500))
    // debounce(mouseMove,500) 调用函数
    // debounce(mouseMove,500)=function(){2,3,4} 因为return 所以是相等的
  </script>
</body>

</html>